<template>
  <div style="width: 300px">
    <div>
      <el-tag type="warn" style="width: 100%">{{resultStr}}</el-tag>
    </div>
    <div style="width: 100%">
      <el-button class="numStyle" @click="numClick(1)">1</el-button>
      <el-button class="numStyle" @click="numClick(2)">2</el-button>
      <el-button class="numStyle" @click="numClick(3)">3</el-button>
      <el-button type="primary" class="numStyle" @click="numClick('+')">+</el-button>
    </div>
    <div>
      <el-button class="numStyle" @click="numClick(4)">4</el-button>
      <el-button class="numStyle" @click="numClick(5)">5</el-button>
      <el-button class="numStyle" @click="numClick(6)">6</el-button>
      <el-button type="success" class="numStyle" @click="numClick('-')">-</el-button>
    </div>
    <div>
      <el-button class="numStyle" @click="numClick(7)">7</el-button>
      <el-button class="numStyle" @click="numClick(8)">8</el-button>
      <el-button class="numStyle" @click="numClick(9)">9</el-button>
      <el-button type="danger" class="numStyle" @click="numClick('*')">*</el-button>
    </div>
    <div>
      <el-button class="numStyle" @click="numClick('.')">.</el-button>
      <el-button class="numStyle" @click="numClick(0)">0</el-button>
      <el-button type="success" class="numStyle" @click="numClick('=')">=</el-button>
      <el-button class="numStyle" @click="numClick('/')">/</el-button>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        resultStr: "",
        calFuhao: "",
        isNum1:true,
        num1: "",
        num2: "",
        num:""
      }
    },
    methods: {
      numClick(num) {
        if (num != '+' && num != '-' && num != '*' && num != '/') {
          this.num += ("" + num)
        } else {
          this.calFuhao = num;
          this.num1=this.resultStr;
        }
        this.resultStr += num;
      }
    }
  }
</script>
<style>
  .numStyle {
    margin-top: 20px;
  }
</style>
